MIS2000Lab.的「HTML5 認證考試，從零開始」#20--Session storage

DAY 20

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 20 篇

html 網頁設計 asp.net 網頁鐵人賽網頁程式 html5 mis2000lab asp.net html

mis2000lab

2014-10-15 13:28:30

3321 瀏覽

分享至

上一篇文章：http://ithelp.ithome.com.tw/question/10159772

前三篇文章簡單地分享了HTML5 API

這篇文章要分享的是離線存取（offline access）

HTTP協定（Protocol）是一個「沒有狀態（Stateless）」的協定，
但仍可以透過一些網頁與Web Server的狀態管理來做。

傳統的cookies或是HTML5的Session Storage API、Local Storage API等等都可以做到類似的功能。

==== 使用cookies維持Session的狀態資訊 ====

當我連上一個Web網站並讀取一個網頁（專業術語：Client端對Web Server發出一個要求，Request），
只要Web Server把網頁的HTML內容完全傳遞給我的瀏覽器之後
（專業術語：Web Server給Client端一個回應，Response），Web Server跟我的電腦就斷線了（off-line）。
不信的話，當您的瀏覽器完全取得HTML資料後，您把網路線移除，

檢查一下瀏覽器上的畫面、文字與圖片應該都在，是不是？

Cookies可以暫存在使用者的周邊、瀏覽器上面，給Web Server識別您的身份。
舉例來說，當我連上一個網站之後，隔天再度連上線變不需要輸入帳號與密碼，也可以直接登入。

以IE瀏覽器為例，cookies最多只能存放4KB的資料量（無法存放大量數據），或是4KB以內最多20組的數值。
有些網站在無意間可能”共用”不同網站給予的cookies而造成私密資料的曝光，

現在的瀏覽器都有頁籤（Tab）功能可以在一個瀏覽器內同時開啟多個網頁，也可能造成共用Cookies的情況。

因此Cookies檔案 "可能" 會被濫用、破解而導致私人訊息的外洩。

由於應用程式處理離線行為（例如在電腦上暫時存放資料以便稍後傳回Web Server）的機會越來越多，

因此這類資訊「無意間被洩漏、誤用」的情況就更為普遍。

==== 使用Session Storage（暫時存放區） ====

Session storage是一種（Client端）瀏覽器上面的持久機制
用來存放 “字串”資料，直到時限過期為止。

或是當使用者關閉瀏覽器的時候也會消失。

如果您有其他資料型態，例如：數字、布林（boolean）等等，請先轉換成「字串」才能放到這些儲存區裡面。

if( window.sessionStorage ){
...
}

註解：為了方便使用，Session storage可以直接在程式裡面呼叫，不需要在前面加上window物件，例如：window.sessionStorage。

注意！Session storage是「暫存性的資料」有儲存期限的限制，或是使用者的瀏覽器一關閉就會消失了。
如果您希望這些資料存放更久，後續的Local storage會符合您的需求，但作法都雷同。

[img=415,288]http://ithelp.ithome.com.tw/upload/images/20141015/20141015132624543e05806271d_resize_600.jpg[/img]

==== JSON與Session Storage ====

您也可以把Session storage（或Local sotrage）資料轉換成JSON字串，

或是透過JSON.stringify()將這些objects資料序列化（serialize）成JSON字串之後，留待後續使用。

var listDiv = document.getElementById("myList");
// HTML畫面上有一個名為myList的<div>標籤。

for(var i=0; i<sessionStorage.length; i++)
{
listDiv.innerHTML += "<br />" + sessionStorage.key(i);
}

下一篇文章將會介紹 Local Storage

http://ithelp.ithome.com.tw/question/10160152

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯